<template>
    <div style="position: relative;">
        <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="私信编号">
        <el-input v-model="queryInfo.pmId" placeholder="请输入私信编号" clearable />
        </el-form-item>   
        <el-form-item>
        <el-button type="primary" @click="getList">搜索</el-button>
        <el-button type="primary" @click="reset" style="margin-left: 30px;">重置</el-button>
        </el-form-item>
        </el-form>
        <div class="mb20">
        <el-button @click="toAdd" type="primary" icon="Plus" plain>新增</el-button>
        <!-- <el-button type="danger" icon="Delete" plain>删除</el-button> -->
        </div>
        <el-table :data="tableData" style="width: 100%">
        <el-table-column type="selection" width="30" />
        <el-table-column fixed prop="pmId" label="私信编号" width="80" />
        <el-table-column prop="user.username" label="用户名" width="90" />
        <el-table-column prop="user.phone" label="手机号" width="130" />
        <el-table-column prop="user.name" label="姓名" width="90" />
        <el-table-column prop="pmText" label="私信内容" width="100">
            <template #default="scope">
            <el-button link type="primary" v-if="scope.row.pmText!=null||scope.row.pmText!=''" @click="details(1,scope.row)">
              <el-icon><Help /></el-icon>
              <span>详情</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="提问时间" width="110" />
        <el-table-column prop="replyText" label="回复内容" width="100" >
            <template #default="scope">
            <el-button link type="primary" v-if="scope.row.replyText!=null" @click="details(2,scope.row)">
              <el-icon><Help /></el-icon>
              <span>详情</span>
            </el-button>
            </template>
         </el-table-column>   
        <el-table-column prop="replyTime" label="回复时间" width="110" />
        <el-table-column fixed="right" label="操作" min-width="60">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="toEdit(scope.row)">修改</el-button>
                <el-button link type="primary" @click="onDel(scope.row.pmId)" size="small">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <div  style="margin-left: 260px; margin-top: 15px;">
        <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 2, 3, 4]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
        </div>
    </div>
    <!-- 添加，编辑弹框 -->
    <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
        <el-form :model="privateMessage">
        <el-form-item label="私信内容" :label-width="formLabelWidth">
          <quill-editor v-model:value="privateMessage.pmText" />
        </el-form-item>
        <el-form-item label="会员编号" :label-width="formLabelWidth">
            <el-input v-model="privateMessage.memberId" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="提问时间" :label-width="formLabelWidth">
            <el-input v-model="privateMessage.createTime" autocomplete="off" />
        </el-form-item>
        <el-form-item label="回复内容" :label-width="formLabelWidth">
          <quill-editor v-model:value="privateMessage.replyText" />
        </el-form-item>
        <el-form-item label="回复时间" :label-width="formLabelWidth">
            <el-input v-model="privateMessage.replyTime" autocomplete="off"/>
        </el-form-item>
        </el-form>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="saveOrUpdate">
            {{saveOrUpdateTitle }}
            </el-button>
        </div>
        </template>
    </el-dialog>
    <el-dialog v-model="detailsVisible" :title="detailsInfor.pmText!=null?'私信内容':'回复内容'" width="1000" 
            @close="clearInfor()">
              <quill-editor v-if="detailsInfor.pmText!=null" v-model:value="detailsInfor.pmText" />
              <quill-editor v-if="detailsInfor.replyText!=null" v-model:value="detailsInfor.replyText" />
      </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus';
import axios from 'axios';
const tableData = ref([]);
const total= ref(0);
import QuillEditor from '@/components/QuillEditor.vue';
const detailsVisible = ref(false);
function clearInfor() {
    detailsInfor.value.pmText = null;
    detailsInfor.value.replyText = null;
}
const detailsInfor = ref({ 
            pmText:null,
            replyText:null
    });
function details(n,row) {
  detailsVisible.value = true;  
  if(n==1){
    detailsInfor.value.pmText = row.pmText;
  }else{
    detailsInfor.value.replyText = row.replyText;  
  }
}

// 定义一个方法当页面加载后立马执行的代码
onMounted(()=>{
    getList();
})
//分页
const handleSizeChange = (val) => {
  queryInfo.value.pageNum=1;
  queryInfo.value.pageSize=val;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum=val;
  getList();
}
// 定义一个全局的查询参数变量
const queryInfo = ref({
    pageNum:1,
    pageSize:3,
    name:''
})
// 重置
const reset = ()=>{
    queryInfo.value={
        pageNum:1,
        pageSize:3,
        name:''
    }
    getList();
}
//定义一个方法，来动态的调用后端接口，获取文章列表
const getList = ()=>{
    // 使用axios调用后端接口获取数据
    axios.get('/PrivateMessageController/selectPrivateMessageAll',{
        params: queryInfo.value
    })
    .then(resp=>{
        let result =  resp.data;
        if(result.code==1){
            total.value=result.data.total;
            tableData.value=result.data.list;    
        }
    }) 
}
// 删除
const onDel = pmId=>{
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
     // 调用后端接口删除
     axios.delete('/PrivateMessageController/deletePrivateMessageById/'+pmId)
        .then(resp=>{
            let result =  resp.data;  // resp是promise对象，.data返回我们自己的标准R 
            if(result.code==1){
                // 重新获取列表
                getList(); 
                ElMessage({
                    message: '删除成功！',
                    type: 'success',
                })
            }else{
                ElMessage({
                    message: '删除失败！',
                    type: 'warning',
                })
            }
        })
    })
    .catch(() => {})
}
// 修改或添加
const saveOrUpdateVisible = ref(false);
const privateMessage = ref({
    pmId:'',
    memberId:'',
    pmText:'',
    createTime:'',
    user:{
        username:'',
        name:'',
        phone:'',
    },
    replyText:'',
    replyTime:''
})
const saveOrUpdateTitle = ref('添加');
// 去添加的页面

const toAdd = row=>{
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加';
  privateMessage.value = {
    pmId:'',
    memberId:'',
    pmText:' ',
    createTime:'',
    user:{
        username:'',
        name:'',
        phone:'',
    },
    replyText:' ',
    replyTime:''
  }
}
// 去修改的页面
const toEdit = row=>{
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '编辑';
  privateMessage.value = row;
}
// 取消修改或保存
const close = ()=>{
  saveOrUpdateVisible.value = false; 
  privateMessage.value = {
    pmId:'',
    memberId:'',
    pmText:'',
    createTime:'',
    user:{
        username:'',
        name:'',
        phone:'',
    },
    replyText:'',
    replyTime:''
  }
}
// 保存或更新
const saveOrUpdate = ()=>{
  saveOrUpdateVisible.value=false;
 
  if(saveOrUpdateTitle.value == '添加'){
    // 调用后端接口添加
    axios.post('/PrivateMessageController/insertPrivateMessage',privateMessage.value) 
    .then(resp=>{
        let result =  resp.data;
        if(result.code==1){
            // 重新获取列表
            getList(); 
            ElMessage({
                    message: '添加成功！',
                    type: 'success',
                })
        } else{
          ElMessage({
                    message: '添加失败！',
                    type: 'warning',
                })
        }
    })
  } else{
    // 调用后端接口修改
    axios.put('/PrivateMessageController/updatePrivateMessageById',privateMessage.value) 
   .then(resp=>{
        // console.log(resp.data)
        let result =  resp.data; 
        if(result.code==1){
            // 重新获取列表
            getList();
            ElMessage({
                    message: '修改成功！',
                    type: 'success',
                })
        } else{
          ElMessage({
                    message: '修改失败！',
                    type: 'warning',
                })
        }
   })

  } 
}
</script>
